<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="banner">
      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221118/b161442c8ac84bb59e058667ef481782.jpg" alt style="width: 100%;">
      <ul class="b-ul">
        <li class="bu-li" v-for="item in config.bannerData" :key="item.id">
          <a :href="item.href" class="bul-cover">
            <img :src="item.src" alt>
          </a>
          <div class="bul-text">
            <a :href="item.href" class="bult-a">{{ item.title }}</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="company">
      <div class="c-center">
        <div class="cc-info">
          <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/203ad3d8674a4bd9abe67612eb3c81f7.jpg" alt class="cci-cover">
          <div class="cci-items">
            <div class="ccii-title">纺扬网站建设|科技公司专注网站建设, 您值得信赖</div>
            <div class="ccii-desc">
              品牌一站式服务，集创意，策划，设计，开发于一身的数字营销创新团队，<br>
              提供专业网站定制，创意H5/小程序，品牌设计，活动策划.一对一24小时<br>
              服务，以网站制作，网站开发，网站设计，微信小程序开发，网页设计制<br>
              作，做网站，网站搭建，建网站为核心业务，数千家网站定制案例，提供<br>
              有价值的企业建站和网络营销策划服务
            </div>
          </div>
        </div>
        <ul class="cc-merit">
          <li class="ccm-li">
            <i class="ccml-icon icon1"></i>
            <p class="ccml-text">网络建设与制作</p>
          </li>
          <li class="ccm-li">
            <i class="ccml-icon icon2"></i>
            <p class="ccml-text">搜索引擎优化</p>
          </li>
          <li class="ccm-li">
            <i class="ccml-icon icon3"></i>
            <p class="ccml-text">信息流广告投放</p>
          </li>
          <li class="ccm-li">
            <i class="ccml-icon icon4"></i>
            <p class="ccml-text">竞价托管</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="foryou">
      <div class="f-center">
        <div class="fc-title">
          <div class="fct-ch">我们还能为您做什么</div>
          <div class="fct-en">
            <span class="line"></span>
            <span class="text">What else can we do for you</span>
          </div>
        </div>
        <div class="fc-list">
          <ul class="fcl-ul">
            <li class="fclu-li">
              <div class="cover icon1"></div>
              <div class="text">抖音<br>代运营</div>
            </li>
            <li class="fclu-li">
              <div class="cover icon2"></div>
              <div class="text">巨量引擎<br>广告投放</div>
            </li>
            <li class="fclu-li">
              <div class="cover icon3"></div>
              <div class="text">网站建设<br>维护托管</div>
            </li>
            <li class="fclu-li">
              <div class="cover icon4"></div>
              <div class="text">新媒体<br>运营</div>
            </li>
            <li class="fclu-li">
              <div class="cover icon5"></div>
              <div class="text">危机公关<br>处理</div>
            </li>
            <li class="fclu-li">
              <div class="cover icon6"></div>
              <div class="text">搜索引擎<br>收录</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="engine">
      <div class="e-center">
        <div class="ec-city">
          <dt class="ecc-title">服务案例与搜索引擎优化</dt>
          <dd class="ecc-list">
            <a target="_blank" v-for="item in caseCityData" :key="item.id" :href="item.href">{{ item.cityName }}</a>
          </dd>
        </div>
        <div class="ec-project">
          <a target="_blank" v-for="item in caseTypeData" :key="item.id" :href="item.href">{{ item.typeName }}</a>
        </div>
        <div class="ec-data">
          <ul class="ecd-ul">
            <li class="ecdu-li" v-for="item in caseData" :key="item.id">
              <a target="_blank" :href="item.href" class="cover" :title="item.title">
                <img :src="item.images" :alt="item.title">
              </a>
              <a target="_blank" :href="item.href" class="title" :title="item.title">{{ item.title }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="n-content">
        <dl class="nc-dl" v-for="item in newsData" :key="item.id">
          <dt class="ncd-cover">
            <a target="_blank" :href="item.href" :title="item.typeName">
              <img :src="item.imgUrl" :alt="item.typeName">
            </a>
          </dt>
          <dd class="ncd-list">
            <div class="ncdl-title">
              <a target="_blank" :href="item.href" class="title" :title="item.typeName">{{ item.typeName }}</a>
              <a target="_blank" :href="item.href" class="more">更多&gt;&gt;</a>
            </div>
            <a target="_blank" v-for="ite in item.newsList" :key="ite.id" :href="ite.href" class="ncdl-a" :title="ite.title">
              <span class="num" :class="ite.num<4 ? 'orange' : ''">{{ ite.num }}</span>
              <p class="title">{{ ite.title }}</p>
            </a>
          </dd>
        </dl>
      </div>
    </div>
    <div class="about">
      <div class="a-center">
        <div class="ac-row">
          <div class="circular1"></div>
          <div class="circular2"></div>
          <div class="circular3"></div>
          <div class="circular4"></div>
          <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/09d300963a3640149f26c20c44293847.jpg" alt class="acr-cover">
          <div class="acr-content">
            <div class="acrc-title">关于我们</div>
            <div class="acrc-desc">走过多年历程的网站建设公司，致力于向客户提供高端网站建设服务、<br>
              小程序开发、网站优化、竞价托管、抖音代运营超过1800家企事业单<br>
              位和个人的选择，用诚信与服务见证成长。</div>
          </div>
        </div>
      </div>
    </div>
    <div class="links">
      <div class="l-center">
        友情链接:
      </div>
    </div>
    <FooterForm :config="config"></FooterForm>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
import u from '@/plugins/public'
export default {
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[0].on = true

    // 获取案例城市
    var caseCityData = []
    let getCaseCity = await u.http({
      url: ctx.store.state.queryCaseCityList,
      params: {
        pageNum: 1,
        pageSize: 100
      }
    })
    if (getCaseCity.code == 200) {
      caseCityData = getCaseCity.data.list
      caseCityData.forEach(item => {
        item.href = `${ctx.config.domain}/khal/${item.cityAliases}/`
      })
    }
    
    // 获取案例类型
    var caseTypeData = []
    let getCaseType = await u.http({
      url: ctx.store.state.queryCaseTypeList,
      params: {
        pageNum: 1,
        pageSize: 100
      }
    })
    if (getCaseType.code == 200) {
      caseTypeData = getCaseType.data.list
      caseTypeData.forEach(item => {
        item.href = `${ctx.config.domain}/khal/${item.typeAliases}/`
      })
    }

    // 获取案例
    var caseData = []
    let getCase = await u.http({
      url: ctx.store.state.queryCaseList,
      params: {
        pageNum: 1,
        pageSize: 8,
        cityCode: '',
        caseType: ''
      }
    })
    if (getCase.code == 200) {
      caseData = getCase.data.list
      caseData.forEach(item => {
        item.href = `${ctx.config.domain}/khalxq/${item.id}.html`
      })
    }

    // 获取新闻资讯
    var newsData = []
    let getNews = await u.http({
      url: ctx.store.state.queryTypeAndNews
    })
    if (getNews.code == 200) {
      newsData = getNews.data
      newsData.forEach(item => {
        item.href = `${ctx.config.domain}/xwzx/${item.typeAliases}/`
        item.newsList.forEach((ite, ind) => {
          ite.num = ind + 1
          ite.href = `${ctx.config.domain}/xwzxxq/${ite.id}.html`
        })
      })
    }
    
    return {
      config: ctx.config,
      caseCityData,
      caseTypeData,
      caseData,
      newsData
    }
  },
  head() {
    return {
      title: '网站建设与制作-网站开发制作公司-网站优化-微信小程序设计-纺扬网站建设',
      meta: [
        { hid: 'description', name: 'description', content: '上海、成都、重庆、北京、广州、深圳网站建设及seo关键词优化认准纺扬科技（☏:191-0267-1826），多年来致力于为客户创造商业价值，您值得信赖。' },
        { hid: 'keywords', name: 'keywords', content: '网站建设,网站制作,网站开发,网站优化,微信小程序设计,纺扬网站建设' }
      ]
    }
  }
}
</script>
